/* -------padding------- */

.m-padded-mini {
    padding: 0.2em !important;
}

.m-padded-tiny {
    padding: 0.3em !important;
}

.m-padded {
    padding: 1em !important;
}

.m-padded-tb-mini {
    padding-top: 0.2em !important;
    /*em:像素*/
    padding-bottom: 0.2em !important;
}

.m-padded-tiny {
    padding-top: 0.3em !important;
    /*em:像素*/
    padding-bottom: 0.3em !important;
}

.m-padded-small {
    padding-top: 0.5em !important;
    /*em:像素*/
    padding-bottom: 0.5em !important;
}

.m-padded-tb {
    padding-top: 1em !important;
    /*em:像素*/
    padding-bottom: 1em !important;
}

.m-padded-tb-large {
    padding-top: 2em !important;
    /*em:像素*/
    padding-bottom: 2em !important;
}

.m-padded-tb-big {
    padding-top: 3em !important;
    /*em:像素*/
    padding-bottom: 3em !important;
}

.m-padded-tb-huge {
    padding-top: 4em !important;
    /*em:像素*/
    padding-bottom: 4em !important;
}

.m-padded-tb-massive {
    padding-top: 5em !important;
    /*em:像素*/
    padding-bottom: 5em !important;
}

.m-padded-lr-responsvie {
    padding-left: 4em !important;
    padding-right: 4em !important;
}

/* ---------margin--------- */

.m-margin-tb-tiny {
    margin-top: 0.3em !important;
    margin-bottom: 0.3em !important;
    /* margin-right: 3em !important; */
}

.m-margin-top-small {
    margin-top: 0.5em !important;
}

.m-margin-top {
    margin-top: 1em !important;
}

.m-margin-top-large {
    margin-top: 2em !important;
}

.m-margin-bottom-small {
    margin-bottom: 0.5em !important;
}

/*---------text---------*/

.m-text {
    font-weight: 300 !important;
    /* 字间距 */
    letter-spacing: 1px !important;
    /* 行间距 */
    line-height: 1.8;
}

.m-text-thin {
    font-weight: 300 !important;
}

.m-text-spaced {
    /* 字间距 */
    letter-spacing: 1px !important;
}

.m-text-lined {
    /* 行间距 */
    line-height: 1.8;
}

.m-text-font-small {
    font-size: 15px !important;
}

.m-text-font {
    font-size: 16px !important;
}

.m-text-font-large {
    font-size: 18px !important;
}

.m-text-font-big {
    font-size: 20px !important;
}

/* --------opacity-------- */

.m-opacity-mini {
    opacity: 0.8 !important;
}

.m-opacity-tiny {
    opacity: 0.6 !important;
}

/* ------display------ */

.m-inline-block {
    display: inline-block !important;
}

/* --------container-------- */

.m-container {
    margin-left: 1em !important;
    margin-right: 1em !important;
}

.m-container-small {
    max-width: 60em !important;
    margin: auto !important;
}

.m-container-medium {
    max-width: 72em !important;
    margin: auto !important;
}

.m-container-large {
    max-width: 80 !important;
    margin: auto !important;
}

@media screen and (max-width: 768px) {
    .title h1 {
        font-size: 33px !important;
        text-transform: uppercase;
        font-family: "MyyiCha";
        /* font-weight: 900; */
        color: #d4e9e936;
        background-image: url("../../assets/pictures/water.png");
        -webkit-background-clip: text;
        animation: water 15s infinite;
      }
    .m-button {
        margin-top: 0em !important;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
}